<template>
  <div :style="{display:'flex',justifyContent:'space-around'}">
    <Category  title="美食分类">
        <img width="100%" :src="foods" alt="">
    </Category>
    <Category  title="游戏分类">
        <ul>
            <li v-for="(item, index) in games" :key="index">{{item}}</li>
        </ul>
    </Category>
    <Category  title="电影分类">
        <video width="100%" :src="movies" controls></video>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  components: { Category },
    name:'App',
    data(){
        return {
            foods:'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
            games:[
                '魂斗罗',
                '彩虹岛',
                '扫雷'
            ],
            movies:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
        }
    }
}
</script>

<style>

</style>